body {
    background-color: #24058e;
}

// banner 
.banner {
    position: relative;

    img {
        width: 100%;
        height: 100%;
    }
}

// price 
.price{
    width: 100%;
     height: auto;
     background: url(../images/back2.png) no-repeat;
     background-size: 100%;
   .bigbox{
     width: 100%;
     height: auto;
     // border: white 1px solid;
     display: flex;
     justify-content: space-around;
     text-align: center;
     color: white;
     .box{
       // height:160px;
       width: 19rem;
       padding-bottom: 1rem;
     // border: white 1px solid;
       background: url(../images/price.png) no-repeat;
       background-size: 100%;
     
       .font{
         position: relative;
         left: 1rem;
         width: 12rem;
         height: 18rem;
         margin:0px  auto;
         //border: white 1px solid;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
           span{
             font-size: 1.8rem;
             
           }
           p{
             font-weight: 700;
             font-size: 4rem;
            
             text-shadow: white 0px 0px 3px;
           }
           h2{
             font-size: 2rem;
             padding-bottom: .5rem;
           }
           h3{
             font-size: 1.8rem;
            
             width: 9.4rem;
             height: 3rem;
             line-height: 3rem;
             background-color: #9272ff;
             border-radius: 20px;
             box-shadow: 0px -1.5px 0px 0px #e435f4;
           }
       }
     }
   }
   .kong{
     height: 35rem;
     //border: #ffffff 1px solid;
       .discounts{
       text-align: center;
       color: #511386;
       background: #f9f002;
       font-size: 25px;
       font-weight: 700;
       width: 60%;
       height: 35px;
       line-height: 35px;
       border-radius: 20px;
       display: block;
       margin:25px auto;
     }
     .sixnine{
       height: 35rem;
       width: 62rem;
       //border: #f9f002 1px solid;
       margin: 1rem auto 0em;
       background: url(../images/box.png) no-repeat;
       background-size: 100%;
       z-index: 999;
       display: flex;
       justify-content: center;
       .product{
         height: 20rem;
         width: 12.8rem;
         background-color: white;
         margin-top: 4.2rem;
         margin-left: .3rem;
         border-radius: 1rem;
         text-align: center;
         img{
           height: 12rem;
           width: 12rem;
           margin-top: .3rem;
           border-radius: 1rem;
         }
         p{
           font-size: 2rem;
           color: #511386;
           font-weight: 700;
           padding-top: .5rem;
         }
       }
       .one{
         margin-left: 0rem;
       }
        
     }
   }
 }
 
 // recommend
 .recommend{
   height: auto;
   width: 100%;
  // border: #f9f002 1px solid;
   background: url(../images/back3.png) no-repeat;
   background-size:100% ;
   h1{
     text-align: center;
     color: white;
     font-weight: 500;
     font-size: 4.8rem;
     margin: 2.8rem auto 1rem;
     //border: 1px solid white;
   }
   .blue{
     height: 32rem;
     width: 57rem;
     background-color: #3268d6;
     margin: 2rem auto;
     border-radius: 1rem;
     position: relative;
     .white{
        height: 29rem;
         width: 54rem;
         background-color: white;
         border-radius: 1rem;
         position: absolute;
         left: 1.1rem;
         top: 1.1rem;
         overflow: hidden;
         .yellow{
           z-index: 999;
           height: 11rem;
           width: 8.5rem;
           background: #f9b002;
           position: absolute;
           top: -2.5rem;
           left: 2rem;
           border-radius: 1.8rem;
           h6{
             font-size: 3rem;
             color: white;
             text-align: center;
             font-weight: 700;
             margin-top: 3.5rem;
           }
         }
         .yellow2{
           z-index: 999;
           height: 11rem;
           width: 8.5rem;
           background: #f9b002;
           position: absolute;
           top: -2.5rem;
           left: 12.5rem;
           border-radius: 1.8rem;
           h6{
             font-size: 3rem;
             color: white;
             text-align: center;
             font-weight: 700;
             margin-top: 3.5rem;
           }
         }
         img{
           height: 100%;
           // width: 15rem;
           position: relative;
           left: -5rem;
         }
         .font{
           height: 23rem;
           width: 26rem;
           //border: red 1px solid;
           position: absolute;
           left: 27rem;
           display: inline-block;
           text-align: left;
           h3{
             font-size: 3.2rem;
             color: #511386;
             margin-top: 3rem;
           }
           p{
               color: #511386;
               font-size: 2.2rem;
             }
             h5{
               color: #f9b002;
               font-size: 3rem;
               margin-top: 1rem;
               font-weight: 700;
             }
             h4{
               background-color: #f9b002;
               color: white;
               width: 13rem;
               text-align: center;
               margin-top: 2rem;
               letter-spacing: .2rem;
               border-radius: .4rem;
               padding: .4rem 0;
               font-size: 2.7rem;
               font-weight: 700;
             }
         }
     }
   }
 }
 
 // market
 .market{
    height: auto;
     width: 100%;
     // border: #f9f002 1px solid;
     background: url(../images/back3.png) no-repeat;
     background-size:100% ;
   h1{
     text-align: center;
     color: white;
     font-weight: 500;
     font-size: 4.8rem;
     margin: 2.8rem auto 0rem;
     //border: 1px solid white;
   }
   .list{
     height: auto;
     width: 60rem;
     // border: #ffffff 1px solid;
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
     .box{
       height: 28rem;
       width: 29rem;
       background-color: white;
       border-radius: 1rem;
       position: relative;
       overflow: hidden;
       margin-top:1rem ;
       img{
         width: 30rem;
       }
       p{
         position: absolute;
         top: 9.5rem;
         left: 50%;
         transform: translateX(-50%);
         color: #511386;
         background-color: white ;
         text-align: center;
         width: 25rem;
         border-radius: 1rem;
         font-size: 3rem;
       }
       .bottom{
         height: 8rem;
         width: 30rem;
         background-color: #3268d6;
         position: absolute;
         bottom: 0;
         .font{
           padding-left: .5rem;
            s{
             font-size: 1.8rem;
             color: rgba(255, 255, 255, 0.486);
             position: absolute;
             top: .8rem;
           }
           h6{
             font-size: 3rem;
             color: rgb(255, 255, 255);
             position: absolute;
             top: 3.5rem;
           }
           span{
             font-size: 3.5rem;
             position: absolute;
             top: 0;
             left: 12.8rem;
             font-weight:700 ;
             color: #f9b002;
           }
           h4{
               background-color: #f9b002;
               color: white;
               width: 12.2rem;
               text-align: center;
               letter-spacing: .1rem;
               border-radius: .4rem;
               padding: .4rem 0;
               font-size: 2.3rem;
               font-weight: 700;
               position: absolute;
               left: 11.6rem;
               top: 4.3rem;
             }
         }
        
       }
     }
   }
 }
 
 //foot
 .foot{
   height: 23rem;
   width: 100%;
   position: relative;
   // background: url(../images/foot.png)no-repeat;
   // background-size: 100%;
   text-align: center;
   .back{
     width: 100%;
     height:23rem;
     position: absolute;
     left: 0;
   }
   h3{
     color: #f9f002;
     font-size: 2.3rem;
     letter-spacing: .3rem;
     font-weight: 700;
     // padding-top:4.5rem;
     position: absolute;
     top: 11rem;
     left: 50%;
     transform: translateX(-50%);
   }
   .up{
     height: 4.5rem;
     width: 4.5rem;
     position: absolute;
     top: 15rem;
     left: 50%;
     transform: translateX(-50%);
   }
 }